<template>
  <div class="div_big">
    <div class="div_little">
      <TabbarItem
        v-for="(item, index) in itemslist"
        :key="index"
        :item="item"
        :index="index"
        :itemindex="selectIndex"
        @tabbindex="tabbindex"
      />
    </div>
  </div>
</template>

<script>
import TabbarItem from "./TabbarItem";
export default {
  components: {
    TabbarItem,
  },
  props: {
    items: {
      type: Array,
      required: true, //是否一定要给值 flase不用 true要
      validator: function (value) {
        return value.length <= 6; //函数表达式 这里不让其值大于6个
      },
    },
    indexapp: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      itemslist: this.items,
      selectIndex: this.indexapp,
    };
  },
  methods: {
    tabbindex(index) {
      this.selectIndex = index;
    },
  },
};
</script>

<style scoped>
.div_big {
  width: 100%;
  height: 64px;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 0.5px solid rgb(233, 233, 233);
  background: white;
}
.div_little {
  width: 100%;
  text-align: center;
  height: 64px;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
}
</style>